<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>收银台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css" />
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        .mui-table-view .mui-media-object {
            line-height: 42px;
            max-width: 145px;
            height: 100px;
        }
        .jiage-text{
            font-size: 18px;
            color: red;
            margin-right:10px ;
        }
        [v-cloak]{
            display: none !important;
        }
    </style>
</head>
<body>


<header class="mui-bar mui-bar-nav top-color">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
    <h1 class="mui-title" style="color: white;">
        收银台
    </h1>
</header>
<div id="vue">
    <div style="margin-top: 60px;overflow: hidden;" >
        <a style="float: left;">
            <span class="mui-icon mui-icon-checkmarkempty" style="font-size: 65px;"></span>
        </a>
        <span style="float: left;">
            恭喜您订单提交成功!<br>
            请尽快完成付款操作。<br>
            <!--订单号：<span>${order.id!}</span>-->
        </span>
    </div>
    <div class="mui-card" >

        <p style="margin-left: 10px;color: black;margin-top: 10px;">
            订单详情
        </p>
        <div class="mui-card-header">
            订单编号：${order.id!}
        </div>
        <div class="mui-card-header">
            <span>支付金额：<em style="color: red;">${order.payMoney/100}</em></span>
        </div>
        <!--<div class="mui-card-content">-->
            <!--<ul class="mui-table-view">-->
                <!--<li class="mui-table-view-cell mui-media" >-->
                    <!--<a href="#">-->
                        <!--<img class="mui-media-object mui-pull-left" src="${base!}/assets/front/h5/img/商品图片6.JPG">-->
                        <!--<div class="mui-media-body" style="white-space:normal;">-->
                            <!--<span>超轻粘土24色儿童无毒橡皮泥彩泥太空水晶黏土女孩手工沙玩具套装</span>-->
                            <!--<p class='mui-ellipsis'style="margin-top: 35px;margin-left: 110px;">-->
                                <!--<span class="jiage-text">￥36.00</span>-->
                                <!--<span>*1</span>-->
                            <!--</p>-->
                        <!--</div>-->
                    <!--</a>-->
                <!--</li>-->
            <!--</ul>-->
        <!--</div>-->
    </div>

    <div class="mui-card" >
        <div class="mui-card-header">
            <!--<a class="mui-navigate-right" href="#">-->
                支付方式
            <!--</a>-->
        </div>
        <form class="mui-input-group">
            <div class="mui-input-row mui-radio" style="height: 60px;">
                <label>
                    <img src="${base!}/assets/front/h5/img/wxpay_logo.png" width="35px" style="margin-right: 10px;float: left;">
                    <span style="margin-top:10px;float:left;">微信支付</span>
                </label>
                <input class="check" name="checkbox1" value="wx" type="radio" checked="checked" style="top: 16px;">
            </div>
            <div class="mui-input-row mui-radio" id="alicheckbox" style="height: 60px;">
                <label>
                    <img src="${base!}/assets/front/h5/img/zfb.png" width="50px" style="float: left;">
                    <span style="margin-top:10px;float:left;">支付宝</span>
                </label>
                <input class="check" name="checkbox1" value="ali" type="radio" style="top: 16px;">
             </div>
        </form>
    </div>




        <div style="width: 300px;margin: 0 auto;">
            <button type="button" v-on:click="buttonPay" class="mui-btn mui-btn-primary mui-btn-block">立即支付</button>
        </div>
    </div>
    <script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
    <script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
    <script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
    <script type="application/javascript">
        mui.init({
            swipeBack:true //启用右滑关闭功能
        });

        //防重
        var fila = true;

        var weiXinData = {};

        var vue = new Vue({
            el: '#vue',
            data: {
                payData: "",
            },
            created:function () {   //实例初始化创建完成执行

                this.isLiuLanqi();
            },
            methods:{              //定义封装方法
                buttonPay:function(){

                    if(!fila){
                        return;
                    }
                    fila = false;
                    var paytype = "";
                    $(".check").each(function (e) {
                        if($(this).is(':checked')){
                            paytype = $(this).val();
                        }
                    })
                    if("ali" == paytype){
                        this.aliPay();
                    }
                    if("wx" == paytype){
                        var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
                        if (ua.match(/MicroMessenger/i) == "micromessenger") {
                            //在微信中打开
                            this.wxJsapiPay();
                            $("#alicheckbox").css("display","none")
                        }else {
                            this.wxH5Pay();
                        }
                    }
                },
                //微信H5支付
                wxH5Pay:function () {
                    var self = this;
                    $.ajax({
                        type:"POST",
                        url:"${base!}/open/h5/pay/weiXinH5Pay.html",
                        dataType:"JSON",
                        data:{
                            orderId:'${order.id!}'
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var d = data.data;
                                self.payData = d;
                                d = JSON.parse(d);
                                if (d.return_code == 'SUCCESS' && d.result_code == 'SUCCESS'){
                                    var payUrl = d.mweb_url+
                                        '&redirect_url=http://www.xunchuangyi.cn/open/h5/order/goOrderPayInfo.html?orderId=${order.id!}';
                                   window.location.href = payUrl;
                                }else {
                                    layerAlert("此订单正在支付中");
                                }
                            } else {
                                layerAlert("商户无微信H5支付权限，请去公众号支付")
                            }
                            fila =true;
                        }
                    });

                },
                //微信JSAPI支付(也就是公众号支付)
                wxJsapiPay:function () {
                    // var self = this;
                    // $.ajax({
                    //     type:"POST",
                    //     url:"${base!}/open/h5/pay/weiXinJsapiPay.html",
                    //     dataType:"JSON",
                    //     data:{
                    //         orderId:'${order.id!}'
                    //     },
                    //     success:function(data){
                    //         if (data.code == 0) {
                    //             weiXinData = data.data;
                    //             // alert(weiXinData)
                    //             if (typeof WeixinJSBridge == "undefined"){
                    //                 if( document.addEventListener ){
                    //                     document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                    //                 }else if (document.attachEvent){
                    //                     document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    //                     document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                    //                 }
                    //             }else{
                    //                 onBridgeReady();
                    //             }
                    //         } else {
                    //
                    //         }
                    //         fila =true;
                    //     }
                    // });
                    window.location.href="${base!}/open/h5/pay/index.html?orderId=${order.id!}";

                },
                //支付宝支付
                aliPay:function () {
                    // var self = this;
                    // $.ajax({
                    //     type:"POST",
                    //     url:"${base!}/open/h5/pay/weiXinH5Pay.html",
                    //     dataType:"JSON",
                    //     data:{
                    //         orderId:'${order.id!}'
                    //     },
                    //     success:function(data){
                    //         if (data.code == 0) {
                    //             var d = data.data;
                    //             self.payData = d;
                    //         } else {
                    //
                    //         }
                    //         fila =true;
                    //     }
                    // });
                    window.location.href = "${base!}/open/h5/pay/aliPay.html?orderId=${order.id!}";

                },
                isLiuLanqi:function () {
                    var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
                    if (ua.match(/MicroMessenger/i) == "micromessenger") {
                        $("#alicheckbox").css("display","none")
                    }
                }
            },
            watch:{     //监听器
                // carModel:function () {
                //     this.getProvince();
                // }
            }

        })


        function onBridgeReady(){
            console.log("微信jsapi唤起请求数据："+JSON.stringify(weiXinData));
            weiXinData = JSON.parse(weiXinData);
            var appid = weiXinData.appId;
            var timeStamp = weiXinData.timeStamp;
            var nonce_str = weiXinData.nonceStr;
            var prepay_id = weiXinData.package;
            var sign = weiXinData.paySign;
            var signType = weiXinData.signType;

            // payData = {};
            // payData.appId=appid;
            // payData.timeStamp=timeStamp;
            // payData.nonceStr=nonce_str;
            // payData.package=prepay_id;
            // payData.signType = signType;
            // payData.paySign=sign;

            // alert("对象:"+JSON.stringify(weiXinData));

            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',{
                    "appId":appid,
                    "timeStamp":timeStamp,
                    "nonceStr":nonce_str,
                    "package":prepay_id,
                    "signType":signType,
                    "paySign":sign
                },
                function(res){
                    console.log("jsapi支付返回结果："+JSON.stringify(res))
                    // alert(JSON.stringify(res))
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    }
                });

            // WeixinJSBridge.invoke(
            //     'getBrandWCPayRequest', {
            //         "appId":appid,     //公众号名称，由商户传入
            //         "timeStamp":timeStamp,         //时间戳，自1970年以来的秒数
            //         "nonceStr":nonce_str, //随机串
            //         "package":prepay_id,
            //         "signType":"MD5",         //微信签名方式：
            //         "paySign": sign //微信签名
            //     },
            //     function(res){
            //         console.log("jsapi支付返回结果："+JSON.stringify(res))
            //         alert(JSON.stringify(res))
            //         if(res.err_msg == "get_brand_wcpay_request:ok" ){
            //             // 使用以上方式判断前端返回,微信团队郑重提示：
            //             //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            //         }
            //     });
        }


        function layerAlert(msg) {
            //提示
            layer.open({
                content: msg
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
        }




    </script>
    </body>
    </html>
